import { useEffect, useState, useCallback } from "react";
import { View, ScrollView } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { IHeaderBox, IUserItem, IloadMore } from "@/components/index";
import { SearchBar, Empty } from "@nutui/nutui-react-taro";
import { studentList } from "@/axios/school";
import "./index.scss";

interface InfoCheckProps {}

interface FormDataProps {
  pageNum: number;
  pageSize: number;
  gradeCode?: number;
  userName?: string;
}

const InfoCheckIndex: React.FC<InfoCheckProps> = () => {
  const [listData, setListData] = useState<API.UserInfoItem[]>([]);
  const [triggered, setTriggered] = useState<boolean>(false);
  const [times, setTimes] = useState<any>(null);

  const [formData, setFormData] = useState<FormDataProps>({
    pageNum: 1,
    pageSize: 10,
    userName: "",
  });

  const [loadStatus, setLoadStatus] = useState<API.LoadStatusProps>("more");

  const [otherInfo, setOtherInfo] = useState<
    Pick<API.TableResProps<null>, "pages">
  >({
    pages: 1,
  });

  const getListData = useCallback(async () => {
    try {
      if (formData.pageNum > 1) setLoadStatus("loading");
      const { list = [], ...other } = await studentList(formData);
      if (formData.pageNum == 1) {
        setListData(list);
      } else {
        setListData((preState) => [...preState, ...list]);
      }
      setLoadStatus(other.pages > formData.pageNum ? "more" : "noMore");
      setOtherInfo(other);
      setTriggered(false);
    } catch {}
  }, [formData]);

  useEffect(() => {
    getListData();
  }, [getListData]);

  useDidShow(() => {
    Taro.hideHomeButton();
  });

  const onRefresh = () => {
    setTriggered(true);
    setFormData({
      pageNum: 1,
      pageSize: 10,
      userName: "",
    });
  };

  const handlerBottom = () => {
    if (otherInfo.pages == formData.pageNum) {
      setLoadStatus("noMore");
    } else {
      setFormData({
        ...formData,
        pageNum: formData.pageNum + 1,
      });
      setLoadStatus("loading");
    }
  };

  const onChangeSearch = (value: string) => {
    if (times) {
      clearTimeout(times);
      setTimes(null);
    }
    const time1 = setTimeout(() => {
      setFormData({
        pageNum: 1,
        pageSize: 10,
        userName: value,
      });
    }, 1500);
    setTimes(time1);
  };

  const handleClickUser = (id: number) => {
    Taro.navigateTo({
      url: `/pages/classMgt/infoCheck/examDetail/index?id=${id}`,
    });
  };

  return (
    <View className="info_page">
      <View className="search_box">
        <SearchBar placeholder="请输入学生信息" onChange={onChangeSearch} />
      </View>
      <ScrollView
        scrollY
        className="scrollview"
        onRefresherRefresh={onRefresh}
        enableBackToTop
        refresherEnabled
        refresherBackground="#f8f8fb"
        refresherTriggered={triggered}
        scrollWithAnimation
        onScrollToLower={handlerBottom}
      >
        <View className="card_box">
          <View className="list_box">
            <IHeaderBox title="学生" />
            <View className="data_info">
              {listData.length > 0 ? (
                <>
                  {listData.map((item: API.UserInfoItem) => (
                    <IUserItem
                      key={item.userName}
                      sourceData={item}
                      handleClick={() => handleClickUser(item.userId)}
                    />
                  ))}
                  <IloadMore loadStatus={loadStatus} />
                </>
              ) : (
                <Empty imageSize={120} />
              )}
            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

export default InfoCheckIndex;
